Skip to content

[Interactive Graph] Add WB Announcer to Tangent Graph#3734

Merged
catandthemachines merged 2 commits into
mainfrom
catjohnson/wb-announcer-tangent
Jun 8, 2026
Merged

[Interactive Graph] Add WB Announcer to Tangent Graph#3734
catandthemachines merged 2 commits into
mainfrom
catjohnson/wb-announcer-tangent

Conversation

@catandthemachines

@catandthemachines catandthemachines commented Jun 5, 2026 •
edited by atlassian Bot
Loading

Copy link
Copy Markdown
Member

Summary

  • Wires the Tangent graph's inflection point (movePoint index 0) and second/control point (movePoint index 1) keyboard moves into the WB Announcer — the reducer's case "tangent" now emits a move-tangent-point stateAnnouncement, and tangent.tsx passes ariaLive="off" to MovablePoint so moves aren't double-announced.
  • getAnnouncementText handles move-tangent-point via a new srTangentPointLabel helper: index 0 reads as the inflection point ("Inflection point at X comma Y.") and index 1 as the control point ("Control point at X comma Y."), matching the static aria-labels. An author-supplied custom label ("Point A at X comma Y.") overrides the inflection/control-point phrasing when one is set — mirroring sinusoid's pointLabels handling.
  • The same-x rejection (which keeps the tangent coefficients defined) happens before the announcement, so a rejected move emits no stateAnnouncement.
  • TODOs reference LEMS-4189, which tracks removing aria-live from useControlPoint once every graph is wired to the announcer.

Issue: LEMS-4196

Test plan

Automated

  • pnpm tsc — passes
  • pnpm lint (changed files) — passes
  • pnpm jest packages/perseus/src/widgets/interactive-graphs — passes (reducer, screenreader-text, and tangent suites)

Manual (reviewer)

  • Open the Interactive Graph → Tangent story in Storybook with VoiceOver/NVDA (or the a11y addon's live-region inspector).
  • Arrow-move the inflection point: confirm you hear "Inflection point at X comma Y." once — not doubled.
  • Arrow-move the second point: confirm you hear "Control point at X comma Y." once.
  • With custom point labels set, confirm a labeled point announces "Point A at …" on move.
  • Regression: open Sinusoid, Absolute Value, and Linear and confirm their announcements are unchanged.

@catandthemachines catandthemachines self-assigned this Jun 5, 2026
@github-actions

github-actions Bot commented Jun 5, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (574fe0a) and published it to npm. You
can install it using the tag PR3734.

Example:

pnpm add @khanacademy/perseus@PR3734

If you are working in Khan Academy's frontend, you can run the below command.

./dev/tools/bump_perseus_version.ts -t PR3734

If you are working in Khan Academy's webapp, you can run the below command.

./dev/tools/bump_perseus_version.js -t PR3734

@github-actions

github-actions Bot commented Jun 5, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Size Change: +46 B (+0.01%)

Total Size: 508 kB

📦 View Changed
Filename Size Change
packages/perseus/dist/es/index.js 200 kB +46 B (+0.02%)
ℹ️ View Unchanged
Filename Size
packages/kas/dist/es/index.js 20.6 kB
packages/keypad-context/dist/es/index.js 1 kB
packages/kmath/dist/es/index.js 6.32 kB
packages/math-input/dist/es/index.js 98.5 kB
packages/math-input/dist/es/strings.js 1.61 kB
packages/perseus-core/dist/es/index.item-splitting.js 12.1 kB
packages/perseus-core/dist/es/index.js 26.3 kB
packages/perseus-editor/dist/es/index.js 105 kB
packages/perseus-linter/dist/es/index.js 9.8 kB
packages/perseus-score/dist/es/index.js 10.2 kB
packages/perseus-utils/dist/es/index.js 403 B
packages/perseus/dist/es/strings.js 8.6 kB
packages/pure-markdown/dist/es/index.js 1.39 kB
packages/simple-markdown/dist/es/index.js 6.71 kB

compressed-size-action

@catandthemachines catandthemachines merged commit b4d94b3 into main Jun 8, 2026
13 checks passed
@catandthemachines catandthemachines deleted the catjohnson/wb-announcer-tangent branch June 8, 2026 18:45
@khan-actions-bot khan-actions-bot mentioned this pull request Jun 8, 2026
Merged
Evelas78 added a commit that referenced this pull request Jun 8, 2026
@Evelas78
Version Packages (#3739)
3dd8fe5 
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @khanacademy/perseus@77.11.0

### Minor Changes

- [#3742](#3742)
[`d15912407c`](d159124)
Thanks [@nishasy](https://github.com/nishasy)! - [Image] Remove gif
flag, make gif controls permanent


- [#3725](#3725)
[`9c601da23f`](9c601da)
Thanks [@EmiliaPalaghita](https://github.com/EmiliaPalaghita)! - Add new
JSON field "showPointLabels" for interactive graphs. When set, every
movable point gets a visible on-canvas label driven by the matching
`pointLabels[i]` entry. `pointLabels` is required whenever
`showPointLabels` is true (enforced by the
interactive-graph-widget-error lint rule).

### Patch Changes

- [#3678](#3678)
[`5d4625eb73`](5d4625e)
Thanks [@catandthemachines](https://github.com/catandthemachines)! -
[Interactive Graph] Add WB Announcer to Quadratic Graph


- [#3718](#3718)
[`7ba77bb3e5`](7ba77bb)
Thanks [@ivyolamit](https://github.com/ivyolamit)! - [Interactive Graph]
Refactor movable-line


- [#3732](#3732)
[`40491377ee`](4049137)
Thanks [@Evelas78](https://github.com/Evelas78)! - Added role="figure"
to the mafs-graph


- [#3729](#3729)
[`fcd76e42c0`](fcd76e4)
Thanks [@ivyolamit](https://github.com/ivyolamit)! - Add test to catch
typo in translation e.g. %(word) -> \\$(word)s


- [#3701](#3701)
[`7ccf7fbc8f`](7ccf7fb)
Thanks [@Myranae](https://github.com/Myranae)! - Migrate sortable fonts
and colors to semantic tokens and add regression stories


- [#3703](#3703)
[`5d00f57022`](5d00f57)
Thanks [@Myranae](https://github.com/Myranae)! - Convert expression
widget related files to use semantic tokens


- [#3733](#3733)
[`6f711cfcf9`](6f711cf)
Thanks [@catandthemachines](https://github.com/catandthemachines)! -
[Interactive Graph] Use WB Announcer in Absolute Value graph.


- [#3736](#3736)
[`1cd01a4550`](1cd01a4)
Thanks [@catandthemachines](https://github.com/catandthemachines)! -
[Interactive Graph] Use WB Announcer in Exponential graph.


- [#3735](#3735)
[`dcc83bdbf8`](dcc83bd)
Thanks [@catandthemachines](https://github.com/catandthemachines)! -
[Interactive Graph] Use WB Announcer in Logarithm graph.


- [#3734](#3734)
[`b4d94b3c09`](b4d94b3)
Thanks [@catandthemachines](https://github.com/catandthemachines)! -
[Interactive Graph] Use WB Announcer in Tangent graph.

- Updated dependencies
\[[`d15912407c`](d159124),
[`9c601da23f`](9c601da),
[`ec0ce8d61a`](ec0ce8d),
[`5d00f57022`](5d00f57)]:
    -   @khanacademy/perseus-core@27.4.0
    -   @khanacademy/perseus-linter@5.1.0
    -   @khanacademy/math-input@26.4.33
    -   @khanacademy/keypad-context@3.2.61
    -   @khanacademy/kmath@2.4.19
    -   @khanacademy/perseus-score@8.11.3

## @khanacademy/perseus-core@27.4.0

### Minor Changes

- [#3725](#3725)
[`9c601da23f`](9c601da)
Thanks [@EmiliaPalaghita](https://github.com/EmiliaPalaghita)! - Add new
JSON field "showPointLabels" for interactive graphs. When set, every
movable point gets a visible on-canvas label driven by the matching
`pointLabels[i]` entry. `pointLabels` is required whenever
`showPointLabels` is true (enforced by the
interactive-graph-widget-error lint rule).

### Patch Changes

- [#3742](#3742)
[`d15912407c`](d159124)
Thanks [@nishasy](https://github.com/nishasy)! - [Image] Remove gif
flag, make gif controls permanent


- [#3726](#3726)
[`ec0ce8d61a`](ec0ce8d)
Thanks [@handeyeco](https://github.com/handeyeco)! - Copy data that was
once shared into perseus-parser

## @khanacademy/perseus-linter@5.1.0

### Minor Changes

- [#3725](#3725)
[`9c601da23f`](9c601da)
Thanks [@EmiliaPalaghita](https://github.com/EmiliaPalaghita)! - Add new
JSON field "showPointLabels" for interactive graphs. When set, every
movable point gets a visible on-canvas label driven by the matching
`pointLabels[i]` entry. `pointLabels` is required whenever
`showPointLabels` is true (enforced by the
interactive-graph-widget-error lint rule).

### Patch Changes

- Updated dependencies
\[[`d15912407c`](d159124),
[`9c601da23f`](9c601da),
[`ec0ce8d61a`](ec0ce8d)]:
    -   @khanacademy/perseus-core@27.4.0
    -   @khanacademy/kmath@2.4.19

## @khanacademy/keypad-context@3.2.61

### Patch Changes

- Updated dependencies
\[[`d15912407c`](d159124),
[`9c601da23f`](9c601da),
[`ec0ce8d61a`](ec0ce8d)]:
    -   @khanacademy/perseus-core@27.4.0

## @khanacademy/kmath@2.4.19

### Patch Changes

- Updated dependencies
\[[`d15912407c`](d159124),
[`9c601da23f`](9c601da),
[`ec0ce8d61a`](ec0ce8d)]:
    -   @khanacademy/perseus-core@27.4.0

## @khanacademy/math-input@26.4.33

### Patch Changes

- [#3703](#3703)
[`5d00f57022`](5d00f57)
Thanks [@Myranae](https://github.com/Myranae)! - Convert expression
widget related files to use semantic tokens

- Updated dependencies
\[[`d15912407c`](d159124),
[`9c601da23f`](9c601da),
[`ec0ce8d61a`](ec0ce8d)]:
    -   @khanacademy/perseus-core@27.4.0
    -   @khanacademy/keypad-context@3.2.61

## @khanacademy/perseus-editor@32.3.2

### Patch Changes

- [#3722](#3722)
[`e751a37c67`](e751a37)
Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - BUGFIX: Fix
cursor positioning after pasting widget content, or after inserting a
widget via the "Add a widget…" dropdown, in the markdown editor (was
jumping to the end of the content always).


- [#3742](#3742)
[`d15912407c`](d159124)
Thanks [@nishasy](https://github.com/nishasy)! - [Image] Remove gif
flag, make gif controls permanent

- Updated dependencies
\[[`5d4625eb73`](5d4625e),
[`7ba77bb3e5`](7ba77bb),
[`d15912407c`](d159124),
[`40491377ee`](4049137),
[`fcd76e42c0`](fcd76e4),
[`9c601da23f`](9c601da),
[`ec0ce8d61a`](ec0ce8d),
[`7ccf7fbc8f`](7ccf7fb),
[`5d00f57022`](5d00f57),
[`6f711cfcf9`](6f711cf),
[`1cd01a4550`](1cd01a4),
[`dcc83bdbf8`](dcc83bd),
[`b4d94b3c09`](b4d94b3)]:
    -   @khanacademy/perseus@77.11.0
    -   @khanacademy/perseus-core@27.4.0
    -   @khanacademy/perseus-linter@5.1.0
    -   @khanacademy/math-input@26.4.33
    -   @khanacademy/keypad-context@3.2.61
    -   @khanacademy/kmath@2.4.19
    -   @khanacademy/perseus-score@8.11.3

## @khanacademy/perseus-score@8.11.3

### Patch Changes

- Updated dependencies
\[[`d15912407c`](d159124),
[`9c601da23f`](9c601da),
[`ec0ce8d61a`](ec0ce8d)]:
    -   @khanacademy/perseus-core@27.4.0
    -   @khanacademy/kmath@2.4.19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ivyolamit ivyolamit ivyolamit approved these changes

@handeyeco handeyeco Awaiting requested review from handeyeco

@Evelas78 Evelas78 Awaiting requested review from Evelas78

@nishasy nishasy Awaiting requested review from nishasy

Assignees

@catandthemachines catandthemachines

Labels

olc-5.0.7fb98

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@catandthemachines @ivyolamit